@import './styles/globals.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* MindMate Design System - v3.0 */
    
    /* 主色调 - 智能蓝 */
    --primary-50: #eff6ff;
    --primary-100: #dbeafe;
    --primary-500: #3b82f6;
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    
    /* 辅助色 - 温暖橙 */
    --accent-500: #f97316;
    --accent-600: #ea580c;
    
    /* 中性色 */
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-500: #64748b;
    --gray-700: #334155;
    --gray-900: #0f172a;
    
    /* 状态色 */
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    
    /* 字体大小 */
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 15px;
    --text-lg: 16px;
    --text-xl: 20px;
    --text-2xl: 24px;
    
    /* 间距系统 */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
    
    /* 圆角规范 */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 50%;
    
    /* 阴影 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    
    /* 兼容旧的变量 */
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 84% 4.9%;
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96%;
    --accent-foreground: 222.2 84% 4.9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 84% 4.9%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 94.1%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  
  body {
    @apply bg-background text-foreground;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
    font-feature-settings: "rlig" 1, "calt" 1;
    background: var(--gray-50);
    color: var(--gray-900);
    line-height: 1.6;
  }
  
  /* MindMate 专用样式 */
  .mindmate-app {
    height: 100vh;
    overflow: hidden;
  }
  
  .mindmate-container {
    display: flex;
    height: 100vh;
  }
}

@layer components {
  /* 自定义滚动条 */
  .custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--border)) transparent;
  }

  .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: hsl(var(--border));
    border-radius: 3px;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--muted-foreground));
  }

  /* 打字机效果 */
  .typing-cursor::after {
    content: '|';
    animation: blink 1s infinite;
  }

  @keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
  }

  /* 消息动画 */
  .message-fade-in {
    animation: fadeIn 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(15px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  /* 新增高级动画效果 */
  .slide-up {
    animation: slideUp 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  }

  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* 滑下动画 - 用于备忘录过时提示 */
  .slide-down {
    animation: slideDown 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* 状态指示器脉冲动画 */
  .status-pulse {
    animation: pulse 1s infinite;
  }

  @keyframes pulse {
    0% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.8;
      transform: scale(1.1);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

  .bounce-in {
    animation: bounceIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }

  @keyframes bounceIn {
    0% {
      opacity: 0;
      transform: scale(0.3);
    }
    50% {
      transform: scale(1.05);
    }
    70% {
      transform: scale(0.9);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

  /* 模态窗口动画 */
  .modal-overlay {
    animation: fadeInOverlay 0.3s ease-out;
  }

  @keyframes fadeInOverlay {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .modal-content {
    animation: modalSlideIn 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  }

  @keyframes modalSlideIn {
    from {
      opacity: 0;
      transform: translateY(-30px) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  /* 会话项悬停效果 */
  .session-item {
    @apply transition-all duration-200 ease-in-out;
  }

  .session-item:hover {
    @apply bg-accent/50 transform scale-[1.02];
  }

  /* 代码块样式 */
  pre {
    @apply bg-gray-100 p-4 rounded-lg overflow-x-auto;
  }

  code {
    @apply bg-gray-100 px-1.5 py-0.5 rounded text-sm font-mono;
  }

  /* 引用样式 */
  blockquote {
    @apply border-l-4 border-blue-500 pl-4 italic text-gray-600;
  }

  /* 加载动画 */
  .loading-dots {
    display: inline-block;
  }

  .loading-dots::after {
    content: '';
    animation: dots 2s linear infinite;
  }

  @keyframes dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60% { content: '...'; }
    80%, 100% { content: ''; }
  }

  /* 搜索结果卡片 */
  .search-result-card {
    @apply border border-border rounded-lg p-4 bg-card hover:bg-accent/50 transition-colors;
  }

  /* 消息气泡 */
  .message-bubble {
    @apply max-w-[80%] rounded-lg p-4 break-words;
  }

  .message-bubble.user {
    @apply bg-primary text-primary-foreground ml-auto;
  }

  .message-bubble.assistant {
    @apply bg-muted text-muted-foreground mr-auto;
  }

  /* 响应式字体 */
  .text-responsive {
    @apply text-sm sm:text-base;
  }

  /* 侧边栏过渡 */
  .sidebar-transition {
    @apply transition-transform duration-300 ease-in-out;
  }

  /* 侧边栏拖拽样式 */
  .sidebar-resize-handle {
    @apply absolute top-0 right-0 w-1 h-full cursor-col-resize bg-transparent transition-all duration-200;
  }

  .sidebar-resize-handle:hover {
    @apply bg-primary w-2;
  }

  .sidebar-resize-handle.dragging {
    @apply bg-primary w-2;
  }

  /* 防止拖拽时选中文本 */
  .dragging-cursor {
    cursor: col-resize !important;
  }

  .dragging-cursor * {
    cursor: col-resize !important;
    user-select: none !important;
  }

  /* 布局优化 */
  .layout-container {
    @apply flex h-screen overflow-hidden;
  }

  .main-content-area {
    @apply flex-1 min-w-0 flex flex-col;
  }

  /* 移动到上面了 */

  /* 欢迎界面居中优化 */
  .welcome-container {
    @apply flex flex-col items-center justify-center h-full;
  }
  
  /* 确保聊天区域占满高度 */
  .chat-messages-container {
    @apply flex-1 overflow-y-auto min-h-0;
    /* 防止默认滚动到底部 */
    scroll-behavior: auto;
  }

  /* 改善整体视觉层次 */
  .sidebar-shadow {
    @apply shadow-sm border-r border-border;
  }

  .main-shadow {
    box-shadow: inset 1px 0 0 hsl(var(--border));
  }

  /* 高级交互效果 */
  .glass-effect {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  .glow-on-hover:hover {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
    transform: translateY(-1px);
  }

  .pulse-on-hover:hover {
    animation: pulse 1s infinite;
  }

  @keyframes pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    }
    70% {
      box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
  }

  /* 输入框聚焦效果 */
  .input-focus-glow:focus-within {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    border-color: var(--primary-500) !important;
  }

  /* 按钮点击效果 */
  .button-click-scale:active {
    transform: scale(0.95);
  }

  /* 消息气泡悬停效果 */
  .message-hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  }

  /* 渐变边框动画 */
  .gradient-border {
    position: relative;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(45deg, var(--primary-500), var(--accent-500)) border-box;
    border: 2px solid transparent;
  }

  /* 加载骨架屏动画 */
  .skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
  }

  @keyframes loading {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }

  /* 文字打字机效果增强 */
  .typewriter {
    overflow: hidden;
    border-right: 2px solid var(--primary-500);
    white-space: nowrap;
    animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
  }

  @keyframes typing {
    from { width: 0 }
    to { width: 100% }
  }

  @keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: var(--primary-500) }
  }

  /* 移动端优化 */
  @media (max-width: 768px) {
    .mobile-full-height {
      height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }
    
    .sidebar-resize-handle {
      @apply hidden;
    }
    
    .welcome-container {
      min-height: calc(100vh - 320px);
    }
    
    /* 移动端触摸优化 */
    .touch-target {
      min-height: 44px;
      min-width: 44px;
    }
    
    /* 移动端动画简化 */
    .reduce-motion {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  /* 文本截断工具类 */
  .line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* 深色模式适配 */
  @media (prefers-color-scheme: dark) {
    .glass-effect {
      background: rgba(0, 0, 0, 0.8);
      border: 1px solid rgba(0, 0, 0, 0.2);
    }
    
    .skeleton {
      background: linear-gradient(90deg, #2a2a2a 25%, #1a1a1a 50%, #2a2a2a 75%);
      background-size: 200% 100%;
    }
  }
}